<!-- src/components/admin/AdminAccounts.vue -->
<template>
  <div>
    <h1>管理员账户管理</h1>
    <div class="toolbar">
      <el-select v-model="sortBy" placeholder="请选择排序方式" @change="sortAccounts">
        <el-option label="ID升序" value="idAsc"></el-option>
        <el-option label="ID降序" value="idDesc"></el-option>
        <el-option label="用户名升序" value="usernameAsc"></el-option>
        <el-option label="用户名降序" value="usernameDesc"></el-option>
      </el-select>
      <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
    </div>

    <!-- 添加管理员账户模态框 -->
    <el-dialog title="添加管理员账户" :visible.sync="dialogVisible" width="30%">
      <el-form :model="newAdmin" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="newAdmin.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="newAdmin.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="newAdmin.realName"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="newAdmin.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="newAdmin.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="newAdmin.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAdmin">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 确认删除对话框 -->
    <el-dialog title="确认删除" :visible.sync="deleteDialogVisible" width="30%">
      <span>确定要删除该管理员账户吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 管理员账户列表 -->
    <el-table :data="sortedAccounts" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="userName" label="用户名" width="180"></el-table-column>
      <el-table-column prop="realName" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="openDeleteDialog(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "AdminAccounts",
  data() {
    return {
      accounts: [],
        
      sortBy: '',
      dialogVisible: false,
      deleteDialogVisible: false,
      newAdmin: {
        userName: '',
        password: '',
        realName: '',
        phone: '',
        gender: '',
        address: ''
      },
      currentAdminId: null,
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  computed: {
    sortedAccounts() {
      let sorted = this.accounts.slice();
      switch (this.sortBy) {
        case 'idAsc':
          sorted.sort((a, b) => a.id - b.id);
          break;
        case 'idDesc':
          sorted.sort((a, b) => b.id - a.id);
          break;
        case 'usernameAsc':
          sorted.sort((a, b) => a.username.localeCompare(b.username));
          break;
        case 'usernameDesc':
          sorted.sort((a, b) => b.username.localeCompare(a.username));
          break;
      }
      return sorted.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    }
  },
  methods: {
    sortAccounts() {
      // 排序逻辑在 computed 属性中处理
    },
    addAdmin() {
      // 添加新管理员逻辑
      this.accounts.push({ ...this.newAdmin, id: this.accounts.length + 1 });
      this.dialogVisible = false;
      this.total = this.accounts.length;

      axios.post("/api/admin/add",this.newAdmin).then(response=>{
        this.$message.success("添加成功")
      }).catch(err=>{
        this.$message.error("添加失败")
      })

    },
    openDeleteDialog(id) {
      this.currentAdminId = id;
      this.deleteDialogVisible = true;
    },
    confirmDelete() {
      this.accounts = this.accounts.filter(account => account.id !== this.currentAdminId);
      this.deleteDialogVisible = false;
      this.total = this.accounts.length;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  mounted() {
    this.total = this.accounts.length;
  }
};
</script>

<style scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
